<template>
  <div class="dreame_container">
    <div class="header">
      <!-- <router-link to="/gender"> -->
      <div>

      </div>
      <div>Read a book
      </div>
      <div>

      </div>

    </div>

    <div class="top">
      <van-search class="felx1" v-model="value" @click="tosousuo" shape="round" background="#ffff"
        placeholder="please enter search keywords" />
    </div>

    <div class="main">
      <van-tabs v-model="active" color="#b550ff" title-active-color="#b550ff" title-inactive-color="#454545">
        <!-- 热门小说 -->
        <MySwiper></MySwiper>
        <van-tab title="Hot">

          <div class="crea">
            <cell :title="'selected Hot Books'" :more="'MORE'"></cell>
            <div class="novelList">
              <Card v-for="item in weekend" :novelitem="item" :key="item.id"></Card>
            </div>
          </div>
          <div class="crea">
            <cell :title="'20% Off Books'" :more="'MORE'"></cell>
            <van-list style="height:600px" v-model:loading="loading" :finished="finished" finished-text="No more"
              @load="onLoad">

              <CardBook v-for="item, index in novelslist" :novelitem="item" :key="index"></CardBook>


            </van-list>


          </div>
        </van-tab>

        <!-- 奇幻小说 -->
        <van-tab title="Fantasy">

          <div class="crea">
            <cell :title="'selected Fantasy Books'" :more="'MORE'"></cell>
          </div>
          <div>
            <Newbook></Newbook>
          </div>
        </van-tab>

        <!-- 新品小说 -->
        <van-tab title="New">


          <div class="crea">
            <cell :title="'selected New Books'" :more="'MORE'"></cell>
          </div>
          <div>
            <Newbook></Newbook>
          </div>
        </van-tab>

        <!-- 免费小说 -->
        <van-tab title="Free">

          <div class="crea">
            <cell :title="'selected Free Books'" :more="'MORE'"></cell>
          </div>
          <div>
            <Newbook></Newbook>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import cell from "../../components/Dreame/cell.vue";
import Card from "../../components/Dreame/Card.vue";
import CardBook from "../../components/Dreame/CardBook.vue";
import MySwiper from "../../components/Dreame/mySwiper.vue";
import Newbook from '../../components/Newbook/newbook.vue'
import { week, weekNum } from '@/api/home'
export default {
  data() {
    return {
      active: 0,
      value: "",
      isAuhor: false,
      weekend: [],
      loading: false,
      finished: false,
      novelslist: [],
      option: { page: 0, size: 5 }
    };
  },

  created() {
    this.hot()
  },
  methods: {
    tosousuo() {
      this.$router.push('/sousuo')
    },
    onLoad() {

      this.option.page++
      this.addlist()
      this.loading = false


    },
    async addlist() {
      let result = await week(this.option)
      if (result.data.list.length < this.option.size) {
        this.finished = true
      }
      //  把以前的结果也叠加到一起去 
      console.log(result);
      this.novelslist = [...this.novelslist, ...result.data.list]

      console.log(this.novelslist);
      this.loading = false
    },
    async hot() {
      let result = await weekNum({
        page: 1,
        size: 6,
        AndWhere: { isHot: ['1'] }

      })

      this.weekend = result.data.list
    }

  },
  components: {
    cell,
    Card,
    CardBook,
    MySwiper,
    Newbook
  },
};
</script>

<style lang="scss" scoped>
.dreame_container {
  width: 100%;

  //  overflow-x: hidden;
  .header {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 10px;

    div {
      &:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: center;
        font-size: 0.6rem;
        font-family: Georgia, "Times New Roman", Times, serif;
      }
    }
  }

  .main {
    padding: 0 10px;
    background-color: #fff;
  }

  .crea {
    margin-top: 30px;

    .novelList {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .Card {
        margin: 10px 5px 0px 0px;
      }
    }

    .CardBook {
      margin-top: 15px;
    }
  }
}
</style>
